<template>
    <div class="sale">
        <h2>Sale折扣专区组件</h2>
        <p>{{id}}-{{type}}</p>
    </div>
</template>

<script>
export default {
    name:"Sale",
    data(){
        return {
            id:'',
            type:''
        }
    },
    created(){
        console.log(this.$route.params);
        let { id,type } = this.$route.params
        this.id=id
        this.type=type
    },
    /* 
    组件内守卫分三个
    1、进入组件之前
    2、组件路由更新之前
    3、离开组价之前 

    当我们判断路由权限的时候，需要当前组件的数据源为辅助判断时，可以考虑使用组件内守卫
    */
    beforeRouteEnter(to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当守卫执行前，组件实例还没被创建
        console.log("进入组件之前调用");
        next(_this => {
            console.log(_this);
        })
        next();
    },
    beforeRouteUpdate(to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
        console.log("组件路由更新之前调用");
        next();
    },
    beforeRouteLeave(to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
        console.log("离开组价之前调用");
        next();
    }
}
</script>

<style scoped>
    .sale{
        width: 100%;
        height: 70%;
        background-color: rgb(205, 253, 255);
    }
</style>